This chapter describes two sample Web pages created using VBScript, with techniques introduced in Part IV, "Developing Dynamic Web Applications with VBScript" (Chapters 17 through 19). The following examples are included:
Example 1. A corporate home page that automatically alerts the user to items that have been added or amended since his previous visit.
Example 2. A Web page that launches customized browser windows, the contents of which are customized in accordance with the choices made by the user.
Document title: Web Software Kings
Files:
Page files:
Figure 20.1 : This is what a first-time visitor to the site sees.
Figure 20.2 : A new user can then register.
Figure 20.3 : Even if the user doesn't register, this is how the site looks on a subsequent visit.
Figure 20.4 : If the user has registered, he is greeted upon his return.
Images:
Description: The example demonstrates the use of cookies to personalize a site for a user. The Web page stores a cookie containing only two pieces of information: the user's forename (if given) and the date the user last visited the site.
An array is used to maintain the dates when links on the main page have been added or when the content of the link has been updated. Quite simply, when a user returns to the site, a comparison is made between the date the user last visited the site and the date of the amendment to the site. If the date last visited is prior to the site amendment, a graphic is displayed to alert the user to the change.
Cookies: (See Chapter 19, "Baking Cookies with VBScript.") A cookie file is used to store the date when the user last visited the site, and if the user has registered with the site, the cookie also stores the user's first name.
Document.Write: (See Chapter 18, "Interacting with the Browser.") The Document.Write method is used to create the custom HTML based on the values returned by the cookie.
Date and time formatting: (See Chapter 8 "Adding Date and Time Functions.") Various date and time functions are used to compare dates from the cookie file with those stored in the HTML file.
Arrays: (See Chapter 10, "Using the Power of Arrays.") Arrays are used to store the date that a link has been added to the page or the date that the contents of the link have been updated.
Listing 20.1 shows the complete source code for kings.html, which is the main page of this example. This page contains the scripts that read and write values to the cookie file and hold the data for determining when items have been added or updated.
Listing 20.1. The kings.html code.
<HTML>
<HEAD>
<TITLE>Web Software Kings</TITLE>
<SCRIPT LANGUAGE="vbscript">
Dim DateLastVisited
Dim LinkType(5)
Dim LinkDate(5)
LinkType(0) = "new"
LinkType(1) = "updated"
LinkType(2) = ""
LinkType(3) = "updated"
LinkType(4) = "updated"
LinkDate(0) = "11/12/96"
LinkDate(1) = "10/12/96"
LinkDate(2) = ""
LinkDate(3) = "09/20/96"
LinkDate(4) = "08/21/96"
DateLastVisited = GetCookieValue("DLV")
Sub window_onUnload()
dim VarName
dim VarVal
dim ExpDate
ExpDate = "expires=Friday, 01-Jan-1999 23:00:00 GMT"
VarName = "DLV"
VarVal = Date()
Document.Cookie = VarName & "=" & VarVal & ";" & ExpDate
End Sub
Function GetCookieValue(CkName)
CkNameLen = Len(CkName)
If InStr(Document.Cookie, CkName) = 0 Then
GetCookieValue = ""
Exit Function
Else
CkValStart = InStr(Document.Cookie, CkName) + CkNameLen + 1
If InStr(CkValStart, Document.Cookie, ";") = 0 Then
CkVal = Mid(Document.Cookie, CkValStart)
Else
CkValEnd = InStr(CkValStart, Document.Cookie, ";")
CkValLen = CkValEnd - CkValStart
CkVal = Mid(Document.Cookie, CkValStart, CkValLen)
End If
GetCookieValue = CkVal
End If
End Function
Function IsNewOrUpdate(LinkNo)
LType = LinkType(LinkNo)
If LType = "" or DateLastVisited = "" Then
IsNewOrUpdate = "crown.gif"
Exit Function
End If
If DateValue(DateLastVisited) < DateValue(LinkDate(LinkNo)) Then
IsNewOrUpdate = CStr(LType) + ".gif"
Else
IsNewOrUpdate = "crown.gif"
End If
End Function
Sub DoFName()
fName = GetCookieValue("ForeName")
If fName = "" Then
Exit Sub
Else
Document.Write "Hi " & fName & "<BR>"
End If
End Sub
Sub PreviousVisits()
If DateLastVisited = "" Then
Exit Sub
Else
Document.Write "back "
End If
End Sub
Sub FirstTimer()
If DateLastVisited = "" Then
Document.Write "As this is your first visit to Web Software Kings "
Document.Write "please take a moment to register and enhance your "
Document.Write "future visits to the site..."
Document.Write "<A HREF=register.html>Click Here to Register</A><P>"
End If
End Sub
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
<FONT FACE="arial" SIZE=3>
<CENTER><B>
<TABLE><TR><TD ALIGN=MIDDLE><IMG SRC="lcrown.gif" ALIGN=LEFT>
</TD>
<TD ALIGN=CENTER>
<H2>
<SCRIPT LANGUAGE="vbscript">
Call DoFName()
</SCRIPT>
Welcome
<SCRIPT LANGUAGE="vbscript">
Call PreviousVisits()
</SCRIPT>
to the <BR>Web Software Kings</H2>
</TD></TR></TABLE>
<BR><P>
<SCRIPT LANGUAGE="vbscript">
Call FirstTimer()
</SCRIPT>
<SCRIPT LANGUAGE="vbscript">
Document.Write "<IMG SRC="
Document.Write IsNewOrUpdate(0)
Document.Write ">"
</SCRIPT>
<A HREF="a.html">WebBase FAQ</A>
<P>
<SCRIPT LANGUAGE="vbscript">
Document.Write "<IMG SRC="
Document.Write IsNewOrUpdate(1)
Document.Write ">"
</SCRIPT>
<A HREF="a.html">WebBase Version 65.3</A>
<P>
<SCRIPT LANGUAGE="vbscript">
Document.Write "<IMG SRC="
Document.Write IsNewOrUpdate(2)
Document.Write ">"
</SCRIPT>
<A HREF="a.html">Dealer Listing</A>
<P>
<SCRIPT LANGUAGE="vbscript">
Document.Write "<IMG SRC="
Document.Write IsNewOrUpdate(3)
Document.Write ">"
</SCRIPT>
<A HREF="a.html">Pricing Structure</A>
<P>
<SCRIPT LANGUAGE="vbscript">
Document.Write "<IMG SRC="
Document.Write IsNewOrUpdate(4)
Document.Write ">"
</SCRIPT>
<A HREF="a.html">Order Form</A>
<P>
</BODY>
</HTML>
Listing 20.2 shows the complete source code for register.html, which is used to create a new cookie file containing the user's name.
Listing 20.2. The register.html code.
<HTML> <HEAD> <TITLE>Web Software Kings - Register</TITLE> <SCRIPT LANGUAGE="vbscript"> Sub Register_OnClick dim VarName dim VarVal dim ExpDate ExpDate = "expires=Friday, 01-Jan-1999 23:00:00 GMT" VarName = "ForeName" VarVal = Document.Form1.forename.Value Document.Cookie = VarName & "=" & VarVal & ";" & ExpDate Location.Href = "kings.html" End Sub </SCRIPT> </HEAD> <BODY BGCOLOR="white"> <FONT FACE="arial" SIZE=3> <CENTER><B> <TABLE><TR><TD ALIGN=MIDDLE><IMG SRC="lcrown.gif" ALIGN=LEFT> </TD> <TD ALIGN=CENTER> <H2> Web Software Kings<BR>User Registration</H2> </TD></TR></TABLE> <BR><P> <FORM NAME="form1"> It's easy to register, just enter your first name here <INPUT TYPE="text" NAME="forename"><P> <INPUT TYPE="button" NAME="register" VALUE="Register Now"> </FORM> </BODY> </HTML>
Document title: A2Z Aluminium Box Co.
Files:
Page files:
Images:
Description: The main page (specs.htm), shown in Figure 20.5, lists the range of standard products produced by the A2Z Aluminium Box Company. To view the specification for each product, the user clicks the button next to the product name.
Figure 20.5 : The product listing page: specs.html.
The script attached to the buttons launches a new browser window using the Window.Open method. (See Figure 20.6.) The HTML file that is loaded into the new window contains a script that writes the appropriate details depending on which button has been clicked. The name given to the new window is used to pass the product number from one script to the other. More than one new window can be open at any time, as shown in Figure 20.7. The script ensures that the correct details are shown in the window.
Figure 20.6 : Click a button to launch the specifications window.
Figure 20.7 : More than one window can be open at any time.
Window.Open: (See Chapter 18.) The example uses the Window.Open method to launch the new customized windows. It also uses Window.Close from the script within the new window.
Document.Write: (See Chapter 18.) The example uses the Document.Write method to create a table of information displayed in the new customized window.
Arrays: (See Chapter 10.) Several arrays, including a multidimension array, are used to store the information that will be displayed in the new window.
Listing 20.3 shows the complete source code for specs.html, which handles the opening of the new windows. The name of the new window is used to pass the product number value from the main window to the new window.
Listing 20.3. The specs.html code.
<HTML> <HEAD> <TITLE>A2Z Aluminium Box Co.</TITLE> <SCRIPT LANGUAGE="vbscript"> Sub DoSpecPage(ProductNo) winname = ProductNo Window.Open "specification.htm", winname,"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, width=200, height=200" End Sub </SCRIPT> <BODY BACKGROUND="back.jpg"> <FONT FACE="arial" SIZE=3> <CENTER> <IMG SRC="a2z.gif"> <P> <H3>Our Product Range</H3> <P> <TABLE CELLSPACING=10 CELLPADDING=10> <TR><TD><B>The Daemon</TD> <TD><INPUT TYPE="button" NAME="cmdButton1" VALUE="Show Specifications" LANGUAGE="vbscript" OnClick="Call DoSpecPage(0)"></TD></TR> <TR><TD><B>Super Rex</TD> <TD><INPUT TYPE="button" NAME="cmdButton2" VALUE="Show Specifications" LANGUAGE="vbscript" OnClick="Call DoSpecPage(1)"></TD></TR> <TR><TD><B>GX Mega</TD> <TD><INPUT TYPE="button" NAME="cmdButton3" VALUE="Show Specifications" LANGUAGE="vbscript" OnClick="Call DoSpecPage(2)"></TD></TR> <TR><TD><B>XL Regular</TD> <TD><INPUT TYPE="button" NAME="cmdButton4" VALUE="Show Specifications" LANGUAGE="vbscript" OnClick="Call DoSpecPage(3)"></TD></TR> </TABLE> </CENTER> </BODY> </HTML>
Listing 20.4 shows the complete source code for specification.htm, which is the HTML page to be loaded into the newly created windows. This page contains all the variable values for each product within arrays, and it displays the correct values based on the product number that is passed to it from specs.htm as the name of the current window.
Listing 20.4. The specification.htm code.
<HTML> <HEAD> <TITLE>Specifications</TITLE> <SCRIPT LANGUAGE="vbscript"> Dim WinName Dim ProdNames(3) ProdNames(0)="The Daemon" ProdNames(1)="Super Rex" ProdNames(2)="GX Mega" ProdNames(3)="XL Regular" Dim Specs(3) Specs(0)="Width" Specs(1)="Height" Specs(2)="Depth" Specs(3)="Weight" Dim Spec(3, 3) Spec(0,0)=1.5 Spec(0,1)=2.63 Spec(0,2)=17.5 Spec(0,3)=6.9 Spec(1,0)=11.5 Spec(1,1)=1.55 Spec(1,2)=9.36 Spec(1,3)=2.89 Spec(2,0)=12.89 Spec(2,1)=3.98 Spec(2,2)=1.8 Spec(2,3)=13.78 Spec(3,0)=10.5 Spec(3,1)=1.52 Spec(3,2)=16.5 Spec(3,3)=11.5 Dim Units(3) Units(0)="metres" Units(1)="metres" Units(2)="metres" Units(3)="kg" WinName = Window.Name Sub Closeme_OnClick Window.Close End Sub </SCRIPT> </HEAD> <BODY BGCOLOR="yellow"> <FONT FACE="arial"> <CENTER><H3>Specifications for <SCRIPT LANGUAGE="vbscript"> Document.Write ProdNames(WinName) </SCRIPT> </H3><B> <TABLE BORDER=1> <SCRIPT LANGUAGE="vbscript"> For i = 0 to 3 Document.Write "<TR><TD>" Document.Write Specs(i) & "</TD><TD ALIGN=RIGHT><B>" Document.Write Spec(WinName,i) & "</TD><TD>" Document.Write Units(i) & "</TD></TR>" Next </SCRIPT> </TABLE> <P> <INPUT TYPE="button" NAME="closeme" VALUE="Close"> </BODY> </HTML>